.dropdown-menu {

  &.daterangepicker {
    background: #fafafa;
    .dropdown-menu.daterangepicker > .no-border-radius;

    &:has(.ranges) .calendar {
      display: none;
    }

    &.opensright {

      &:before {
        border-right: 7px solid transparent;
        border-bottom: 7px solid @input-border;
        border-left: 7px solid transparent;
        border-bottom-color: @input-border;
      }

      &:after {
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fafafa;
        border-left: 6px solid transparent;
      }
    }

    .calendar-time {
      background: #fff;
      border: 1px solid @input-border;
      .dropdown-menu.daterangepicker > .no-border-radius;
    }

    .no-border-radius {
      border-color: @input-border;
      .border-radius(@border-radius-base);
    }

    .range_inputs input {
      color: @main-text-color;
      outline: none;
    }

    .calendar-date,
    .range_inputs input,
    table > thead > tr > th,
    table > thead > tr > td,
    table > tbody > tr > th,
    table > tbody > tr > td,
    table > tbody > tr > td.start-date.end-date {
      .dropdown-menu.daterangepicker > .no-border-radius;
    }

    .calendar-date {

      table {

        > thead {

          th {
            color: @main-text-color;
          }

          .month {
            color: @text-color;
          }

          .next, .prev {

            i:before {
              font-family: 'fontawesome';
              content: '\f105';
              font-size: 11px;
            }

            &.prev i:before {
              content: '\f104';
            }

            &:hover {
              background-color: #f5f5f5;
            }
          }
        }

        > tbody {

          > tr {

            > td {
              color: @main-text-color;
              .user-select(none);

              &:hover {
                background-color: #f5f5f5;
              }

              &.available {
                color: darken(@main-text-color, 10%);
              }

              &.off {
                color: lighten(@main-text-color, 15%);
              }

              &.disabled {
                background-color: #fafafa;
                color: lighten(@main-text-color, 15%);
                cursor: not-allowed;
              }

              &.in-range {
                background-color: fade(@secondary-color, 10%);
              }

              &.active {
                background-color: @secondary-color;
                color: #fff;
              }
            }
          }
        }
      }
    }

    .btn-default {
      border-color: @input-border;
    }

    .ranges {

      ul {

        li {
          background: #fff;
          border-color: @input-border;
          color: @main-text-color;
          padding: 4px @base-padding - 2;
          font-size: @font-size-small;
          text-align: center;
          line-height: 1;
          .border-radius(@border-radius-base);

          &:hover {
            //color: @text-color;
            background: #f5f5f5;
          }

          &.active {
            color: #fff;
            background: @secondary-color;
            border-color: @secondary-color;
          }
        }
      }
    }
  }
}

.daterange-inline {
  background: #f5f5f5;
  border: 1px solid @input-border;
  padding: @base-padding;
  cursor: pointer;

  i {
    color: @text-color;
    margin-right: @base-padding/2;
  }

  &:hover {
    color: @text-color;
  }
}